<!-- 以后项目的根组件 -->
<template>
	<div>
		<!-- 1.0固定导航mint-ui -->
		<mt-header fixed title="黑马商城"></mt-header>
		<!--返回按钮  -->
		<div v-if='isshow' id='backBtn'>
			<a href="javascript:;" @click='backTo()'>返回</a>
		</div>
		
		<!-- 2.0路由站位 -->
		<router-view></router-view>
		
	
		<!-- 3.0底部mui -->
		<nav class="mui-bar mui-bar-tab">
		<router-link class="mui-tab-item" to="/home">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</router-link>
		<router-link class="mui-tab-item" to="/membership">
			<span class="mui-icon mui-icon-email"></span>
			<span class="mui-tab-label">会员</span>
		</router-link>
		<router-link class="mui-tab-item" to="/car">
			<span class="mui-icon mui-icon-contact"><span id="bandage" class="mui-badge">0</span></span>
			<span class="mui-tab-label">购物车</span>
		</router-link>
		<router-link class="mui-tab-item" to="/search">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">搜索</span>
		</router-link>
	</nav>
	</div>
</template>

<script>
//导入VM对象
	import {vm,COUNTSTR} from './kits/vm.js';
	vm.$on(COUNTSTR,function(count){
		//count是goodsinfo传过来的数据
		//console.log(count);
		var countspan=document.getElementById("bandage");
		//console.log(countspan.innerText);
		countspan.innerText=parseInt(countspan.innerText)+count;
	})
	export default{
		data(){
			return {
				isshow:false,
			}
		},
		watch:{
			"$route":function(newroute,oldroute){
				if(newroute.path=='/home'){
					this.isshow=false;
				}else{
					this.isshow=true;
				}
			}
		},
		methods:{
			backTo(){
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped>
/*当前页面的css样式写到这里，其中scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件页面*/
	#backBtn{
		position: absolute;
		top:10px;
		left:10px;
		width: 60px;
		z-index:101;
		
	}
	#backBtn a{
		color:#fff;
	}
</style>